<!-- 人员统计卡片 -->
<template>
  <div class="box" :style="styleObject">
    <template v-for="(item, index) in props.list" :key="item.name">
      <div class="item">
        <div class="item-box">
          <div
            :class="[
              'content',
              item.name === props.selectKey ? 'content-select' : ''
            ]"
            @click="handleClick(item.name)"
            @mouseenter="handleEnter"
            @mouseleave="handleLeave($event, item.name === props.selectKey)"
          >
            <div
              class="content-item"
              :style="{ fontSize: props.fontSize + 'px' }"
            >
              {{ item.name }}
            </div>
            <div
              class="content-item"
              :style="{
                fontSize: props.fontSize + 'px',
                color: item.name === props.selectKey ? '#fff' : props.color
              }"
            >
              {{ item.value }}人
            </div>
          </div>
        </div>
        <!-- <div
          class="item-after"
          :style="{
            borderColor: props.color
          }"
          v-if="index !== props.list.length - 1"
        ></div> -->
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
const props = withDefaults(
  //参数说明
  defineProps<{
    layout?: 'horizontal' | 'vertical'; //水平/垂直
    fontSize?: number;
    color1: string; // 背景色
    color2: string; // 边框颜色
    list: any[];
    selectKey?: number;
    onlyRead?: boolean; //是否只读
  }>(),
  {
    layout: 'vertical', //垂直
    fontSize: 16
  }
);
const emit = defineEmits(['update:selectKey', 'cardClick']);

const router = useRouter();
let isCursor = ref<string | null>('pointer'); // 判断鼠标移入的样式是否有cursor， 如果是props.onlyRead === true的话就是null, 否则为pointer

if (props.onlyRead) {
  isCursor.value = null;
} else isCursor.value = 'pointer';

const styleObject = computed(() => ({
  '--color1': props.color1,
  '--color2': props.color2
}));

const handleClick = (key: string) => {
  switch (key) {
    case '待离职':
      router.push({
        name: 'WaitLeave'
      });
      break;
    case '待入职':
      router.push({
        name: 'WaitManagement'
      });
      break;
    case '试用期':
      router.push({
        name: 'ProbationPeriodManagement'
      });
      break;
    case '实习生':
      router.push({
        name: 'InternshipManagement'
      });
      break;
    case '历史已离职':
      router.push({
        name: 'HaveLeave'
      });
      break;
    default:
      break;
  }
};

const handleEnter = (el: any) => {
  if (props.onlyRead) return;
  const { target } = el;
  // target.style.background = props.color;
  const children = target.children[1];
  // children.style.color = '#fff';
};
const handleLeave = (el: any, selected: boolean) => {
  if (props.onlyRead) return;
  // 如果是已选择，鼠标移出不改变
  if (selected) return;
  const { target } = el;
  // target.style.background = '#fff';
  const children = target.children[1];
  // children.style.color = props.color;
};
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 60px;
  padding: 10px 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  box-shadow: 1px -1px 10px 0 #cacaca;
  border: solid 2px var(--color1);
  overflow: hidden;
  // background-color: var(--aa);
  color: #000;
  background: #fff;
  border-color: var(--color2);
  // background: -moz-linear-gradient(30deg, var(--color1) 30%, var(--color2) 70%);
  // background: -webkit-linear-gradient(30deg, var(--color1) 30%, var(--color2) 70%);
  // background: -o-linear-gradient(30deg, var(--color1) 30%, var(--color2) 70%);
  // background: -ms-linear-gradient(30deg, var(--color1) 30%, var(--color2) 70%);
  // background: linear-gradient(120deg, var(--color1) 30%, var(--color2) 70%);
  .item {
    flex: 1;
    overflow: hidden;
    position: relative;

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: 1px;
      height: 50%; /* 设置分隔线高度为盒子高度的一半 */
      background-color: #ccc;
    }
    &-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      .line {
        position: absolute;
        content: '';
        display: inline-block;
        right: -10px;
        z-index: 999;
        overflow: visible;
        width: 1px;
        height: 40px;
        background-color: #ccc;
      }
      .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #333;
        padding: 0 30px;
        margin: 0 10px;
        min-height: 56px;
        &-item {
          padding: 5px 0;
          word-break: break-all;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          white-space: nowrap;
        }
      }
      .content-select {
        border-radius: 5px;
        color: white;
      }
      .content:hover {
        cursor: v-bind(isCursor);
        color: white;
        background-color: var(--color2);
        border-radius: 5px;
      }
    }
  }
  .item-after {
    height: 50%;
    border-right: 2px solid;
  }
}
:deep(.arco-divider-vertical) {
  height: 30px;
  width: 5px;
}
</style>
